<template>
	<view>
		<!--pages/promotion/promotion.wxml-->
		<view class="search">
			<input :value="keyword" type="text" maxlength="30" confirm-type="search" placeholder="请输入商品名称" placeholder-class="pl" @input="inputSearch" @confirm="search"></input>
			<view @tap="search">搜索</view>
		</view>
		<view>
			<block v-for="(item, index) in goodsList" :key="index">
				<view class="viewc_inner meetReduceImgBox" @tap="toDetail" :data-id="item.goods_id">
					<image class="viewc_inner_a" mode="aspectFit" :src="item.goods_image"></image>
					<view v-if="item.goods_num<=0" class="goods-sell-empty">已售空</view>
					<view class="viewc_inner_b">{{item.goods_name}}</view>
					<view class="viewc_inner_c">
						<text class="isvip">￥{{item.act_price}}<text class="price_pass"><text class="pass">￥{{item.online_price}}</text></text>
						</text>
					</view>
				</view>
			</block>
		</view>
		<view class="loading">
			<block v-if="showLoading">
				<image src="https://mall.xzthealth.com/loading2.gif"></image>
				<text>加载中</text>
			</block>
			<block v-else-if="canLoad">
				<text>下拉加载更多</text>
			</block>
		</view>
		<view class="kong" v-if="goodsList&&goodsList.length&&!canLoad">已显示全部</view>
		<view class="kong" v-if="!goodsList.length&&!canLoad&&!isLoading">暂无商品</view>
	</view>
</template>

<script>
	// pages/promotion/promotion.js
	var app = getApp().globalData;

	export default {
		data() {
			return {
				goodsList: [],
				page: 0,
				canLoad: true,
				isLoading: false,
				keyword: ""
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		async onLoad(options) {
			await this.$onLaunched;
			// #ifdef MP-ALIPAY
			if (JSON.stringify(options) == '{}') {
				options = my.getLaunchOptionsSync().query;
			}
			// #endif
			if (options && (options.store_id)) {
				this.$store.store_id = options.store_id;
			}
			this.getData();
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			this.setData({
				page: 0,
				canLoad: true,
				isLoading: false
			});
			this.getData();
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			this.getData();
		},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage() {
			return {
				title: '促销商品',
				path: '/pages/product/promotion/promotion?store_id=' + this.$store.store_id + '&share_uid=' + app.XcxData.userInfo.uid,
			};
		},
		methods: {
			toDetail: function(e) {
				uni.navigateTo({
					url: '/pages/product/details/details?id=' + e.currentTarget.dataset.id
				});
			},
			getData: function() {
				if (this.canLoad) {
					this.setData({
						canLoad: false,
						isLoading: true
					});
					var that = this;
					var page = parseInt(this.page) + 1;
					getApp().globalData.sendRequest({
						url: '/Goods/getPromotion',
						data: {
							page: page,
							keyword: that.keyword
						},
						success: function(res) {
							if (res.status == 1) {
								var goodsList = that.goodsList;

								if (page == 1) {
									goodsList = res.data;
								} else {
									if (res.data.length) {
										goodsList.push.apply(goodsList, res.data);
									}
								}

								var canLoad = true;

								if (res.data.length < res.limit) {
									canLoad = false;
								}

								that.setData({
									canLoad: canLoad,
									goodsList: goodsList,
									isLoading: false,
									page: page
								});
							} else {
								uni.showModal({
									title: '提示',
									content: res.msg,
									showCancel: false,
									confirmText: '确定',
									confirmColor: '#ff5c6d'
								});
							}
						}
					});
				}
			},
			inputSearch: function(e) {
				this.setData({
					keyword: e.detail.value
				});
			},
			search: function() {
				this.setData({
					canLoad: true,
					page: 0,
					isLoading: false
				});
				this.getData();
			}
		}
	};
</script>
<style>
	@import "./promotion.css";
</style>
